<template>
  <div>
    <!-- 对比评吸设置 -->
    <div class="top df w100 jc-sb">
      <somkeTop :title="top_title" :list="top_list"></somkeTop>
      <div> <lay-button @click="close" class="layui-btn ">关闭</lay-button></div>
    </div>
    <div class="content">
      <div class="btn">
        <lay-button size="sm" style="background-color: #b8d8f8;color: #000;" @click="open_y">选择烟支</lay-button>
      </div>
      <div class="table-group">
        <table border="">
          <tr>
            <th colspan="2">项目</th>
            <th colspan="3">光泽</th>
            <th colspan="3">香气</th>
            <th colspan="3">谐调</th>
            <th colspan="3">杂气</th>
            <th colspan="3">刺激性</th>
            <th colspan="3">余味</th>
            <th rowspan="3">合计</th>
            <th rowspan="3">操作</th>
          </tr>
          <tr>
            <td rowspan="2">样品编号</td>
            <td rowspan="2">牌别</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
          </tr>
          <tr>
            <td v-for="(item,index) in gradeParams" :key="index">{{ item }}</td>
          </tr>
          <!-- <tr v-for="(item,index) in b_list_sele" :key="index">
            <td>标样</td>
            <td>{{item.smokeName}}</td>
            <td colspan="3">{{ item.smokeGloss }}</td>
            <td colspan="3">{{item.smokeAroma}}</td>
            <td colspan="3">{{item.smokeHarmony}}</td>
            <td colspan="3">{{item.smokeImpure}}</td>
            <td colspan="3">{{item.smokeThrill}}</td>
            <td colspan="3">{{item.smokeAftertaste}}</td>
            <td>{{item.smokeTotal}}</td>
            <td>删除</td>
          </tr> -->

          <tr v-for="(item,index) in y_list_sele" :key="index">
            <td>{{ item.number || item.id }}</td>
            <td>{{ item.smokeModel }}</td>
            <td colspan="3">-</td>
            <td colspan="3">-</td>
            <td colspan="3">-</td>
            <td colspan="3">-</td>
            <td colspan="3">-</td>
            <td colspan="3">-</td>
            <td  >-</td>
 
            <td rowspan="2" v-if="(index)%2==0"><el-button link @click="del_y(item,index)">删除</el-button></td>
          </tr>

        </table>
        <!-- <lay-table :columns="columns7" :data-source="dataSource7" :span-method="spanMethod7" :default-toolbar="true"></lay-table> -->
      </div>
      <!-- <div class="footer-btn">
        <div></div>
        <div>
          <lay-button @click="close" class="layui-btn layui-bg-blue">关闭</lay-button>
        </div>
      </div> -->

      <!-- 烟支弹层 -->
      <lay-layer v-model="y_visible" :area="['800px', '620px']" :title="'选择烟支'" :btn="y_visible_opteron">
        <div style="padding: 20px 40px 20px 20px;">
          <lay-table ref="tableRef3" :columns="y_columns" :data-source="y_dataSource" :default-toolbar="false" v-model:selectedKeys="y_selectedKeys">

          </lay-table>
        </div>
      </lay-layer>
    </div>
  </div>
</template>

<script setup lang="ts">
import somkeTop from "@/components/somkeTop.vue";
import http from "@/http/index";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { layer } from "@layui/layui-vue";
const route = useRoute();
const router = useRouter();
const id = route.query.id;
const info = ref([]);

// 最高最低分配置
const gradeParams = ref([5, 4, 3, 32, 25, 24, 6, 5, 4, 12, 10, 8, 20, 17, 15, 25, 22, 20]);

const top_title = ref("对比评吸设置");
const top_list = ref([
  {
    name: "单位(部门)",
    content: "许昌卷烟厂",
    id: 1,
  },
  {
    name: "时间",
    content: new Date().toLocaleString(),
    id: 2,
  },
  {
    name: "编号",
    content: "Q/HNZY 101.3 001-15",
    id: 3,
  },
]);
// 烟支弹层
const y_visible = ref(false);
// 烟支当前选中的key
const y_selectedKeys = ref([]);
// 烟支列表数据
const y_dataSource = ref([]);
// 烟支header    key
const y_columns = ref([
  { fixed: "left", type: "checkbox", title: "复选" },
  { title: "牌号", key: "smokeModel" },
  // { title: "价格", key: "smokePerk" },
]);
// 当前选中的烟支列表
const y_list_sele = ref([]);
// 烟支弹层操作
const y_visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      await enter();
      // y_list_sele.value = [];
      // y_dataSource.value.map((ele) => {
      //   y_selectedKeys.value.map((item) => {
      //     if (ele.id == item) {
      //       y_list_sele.value.push(ele);
      //     }
      //   });
      // });
      // y_visible.value = false;
    },
  },
  {
    text: "取消",
    callback: () => {
      y_visible.value = false;
      //   layer.confirm("取消操作", { shade: false,icon:2 });
    },
  },
]);

// 选择烟支
const open_y = () => {
  y_visible.value = true;
};
//确认
const enter = async () => {
  console.log(info.value);

  let method = "post";
  if (info.value && info.value.length > 0) {
    method = "put";
  }

  const res = await http.corsApi("/meetingContrast", method, {
    allId: id,
    allowanceIdList: y_selectedKeys.value,
  });
  console.log(res);
  if (res.data) {
    layer.confirm("设置完成", { icon: 1 });
    await get_detail();
    y_visible.value = false;
    // setTimeout(() => {
    //   router.go(-1);
    // }, 1500);
  }
};

// 删除当前选中的
const del_y = async (item, index) => {
  // /meetingContrast/batch

  console.log(item, index);
  console.log(item.id, y_list_sele.value[index + 1].id);
  let nextId = y_list_sele.value[index + 1].id

  const res = await http.corsApi(`/meetingContrast/batch`, "delete", [item.id,nextId]);
  console.log(res);

  if (res.data) {
    layer.confirm("删除完成", { icon: 1 });
    await get_detail();
  }
};

// 取消
const close = () => {
  router.go(-1);
};

// 获取烟支列表
const get_y_list = async () => {
  const res = await http.corsApi("/smokeAllowance", "get", {});
  console.log(res);
  y_dataSource.value = res.data;
};

// 获取页面详情
const get_detail = async () => {
  y_selectedKeys.value = [];
  y_list_sele.value = [];
  const res = await http.corsApi("/meetingContrast", "get", { allId: id });
  console.log(res);
  info.value = res.data;
  //   y_list_sele.value = res.data
  res.data.map((item) => {
    y_selectedKeys.value.push(item.allowanceId);
    y_dataSource.value.map((ele) => {
      if (item.allowanceId == ele.id) {
        y_list_sele.value.push({ ...item, smokeModel: ele.smokeModel });
      }
    });
  });
  y_selectedKeys.value = Array.from(new Set(y_selectedKeys.value));
  console.log(y_list_sele.value);
};

onMounted(async () => {
  await get_y_list();
  await get_detail();
});
</script>

<style scoped lang="scss">
.top {
  width: 100%;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
}
.content {
  width: 100%;
  background-color: #f5f5f5;
  padding: 30px 25px;
  box-sizing: border-box;
  .btn {
    margin-bottom: 15px;
  }
  .table-group {
    height: 500px;

    overflow-y: scroll;
    table {
      width: 100%;
      overflow: auto;
      tr {
        th {
          padding: 10px 0;
        }
        td {
          padding: 10px;
          text-align: center;
        }
      }
    }
  }
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #e4e4e4;
    border-radius: 2px;
  }
  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #b4b7c0;
    border-radius: 2px;
  }
}
.footer-btn {
  display: flex;
  justify-content: space-between;
  padding: 15px 40px;
  box-sizing: border-box;
}
</style>